<template>
  <div class="page">
    <div class="containerInner">
      <div class="wrapper">
        <div class="header">
          <div class="group">
            <img
                class="iconUser"
                src="../assets/img/img_0.png"
            />
            <span class="chime">Pistachio</span>
          </div>
          <!--          导航栏提取-->
          <Navigation></Navigation>
          <!--          登陆注册栏提取-->
          <LoginBar class="login-bar"></LoginBar>
        </div>
        <div class="search">
<!--          <el-input placeholder="搜索单曲、歌手" v-model="content" class="input-with-select">-->
<!--            <el-button slot="append" icon="el-icon-search"></el-button>-->
<!--          </el-input>-->
          <SearchBar></SearchBar>
        </div>
        <div class="body">
          <div class="front">

            <section id="wrap">
<!--              <header>-->
<!--                <h1>JS Piano</h1>-->
<!--                <h2>Use your keyboard. Hover for hints.</h2>-->
<!--              </header>-->
              <section id="main">
                <div class="nowplaying"></div>
                <div class="keys">
                  <div data-key="65" class="key" data-note="C">
                    <span class="hints">A</span>
                  </div>
                  <div data-key="87" class="key sharp" data-note="C#">
                    <span class="hints">W</span>
                  </div>
                  <div data-key="83" class="key" data-note="D">
                    <span class="hints">S</span>
                  </div>
                  <div data-key="69" class="key sharp" data-note="D#">
                    <span class="hints">E</span>
                  </div>
                  <div data-key="68" class="key" data-note="E">
                    <span class="hints">D</span>
                  </div>
                  <div data-key="70" class="key" data-note="F">
                    <span class="hints">F</span>
                  </div>
                  <div data-key="84" class="key sharp" data-note="F#">
                    <span class="hints">T</span>
                  </div>
                  <div data-key="71" class="key" data-note="G">
                    <span class="hints">G</span>
                  </div>
                  <div data-key="89" class="key sharp" data-note="G#">
                    <span class="hints">Y</span>
                  </div>
                  <div data-key="72" class="key" data-note="A">
                    <span class="hints">H</span>
                  </div>
                  <div data-key="85" class="key sharp" data-note="A#">
                    <span class="hints">U</span>
                  </div>
                  <div data-key="74" class="key" data-note="B">
                    <span class="hints">J</span>
                  </div>
                  <div data-key="75" class="key" data-note="C">
                    <span class="hints">K</span>
                  </div>
                  <div data-key="79" class="key sharp" data-note="C#">
                    <span class="hints">O</span>
                  </div>
                  <div data-key="76" class="key" data-note="D">
                    <span class="hints">L</span>
                  </div>
                  <div data-key="80" class="key sharp" data-note="D#">
                    <span class="hints">P</span>
                  </div>
                  <div data-key="186" class="key" data-note="E">
                    <span class="hints">;</span>
                  </div>
                </div>

                <audio data-key="65" src="../assets/pianoMusic/040.wav"></audio>
                <audio data-key="87" src="../assets/pianoMusic/041.wav"></audio>
                <audio data-key="83" src="../assets/pianoMusic/042.wav"></audio>
                <audio data-key="69" src="../assets/pianoMusic/043.wav"></audio>
                <audio data-key="68" src="../assets/pianoMusic/044.wav"></audio>
                <audio data-key="70" src="../assets/pianoMusic/045.wav"></audio>
                <audio data-key="84" src="../assets/pianoMusic/046.wav"></audio>
                <audio data-key="71" src="../assets/pianoMusic/047.wav"></audio>
                <audio data-key="89" src="../assets/pianoMusic/048.wav"></audio>
                <audio data-key="72" src="../assets/pianoMusic/049.wav"></audio>
                <audio data-key="85" src="../assets/pianoMusic/050.wav"></audio>
                <audio data-key="74" src="../assets/pianoMusic/051.wav"></audio>
                <audio data-key="75" src="../assets/pianoMusic/052.wav"></audio>
                <audio data-key="79" src="../assets/pianoMusic/053.wav"></audio>
                <audio data-key="76" src="../assets/pianoMusic/054.wav"></audio>
                <audio data-key="80" src="../assets/pianoMusic/055.wav"></audio>
                <audio data-key="186" src="../assets/pianoMusic/056.wav"></audio>
              </section>
            </section>

          </div>


        </div>

      </div>
    </div>
  </div>
</template>
<script>
import Navigation from "@/components/Navigation";
import LoginBar from "@/components/LoginBar";
import SearchBar from "@/components/SearchBar";





export default {
  components: {
    Navigation,
    LoginBar,
    SearchBar,

  },
  data() {
    return {
      content: '',
      search: ''
    }
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    }
  },
  mounted() {
    const keys = document.querySelectorAll(".key"),
        note = document.querySelector(".nowplaying"),
        hints = document.querySelectorAll(".hints");

    function playNote(e) {
      const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`),
          key = document.querySelector(`.key[data-key="${e.keyCode}"]`);

      if (!key) return;

      const keyNote = key.getAttribute("data-note");

      key.classList.add("playing");
      note.innerHTML = keyNote;
      audio.currentTime = 0;
      audio.play();
    }

    function removeTransition(e) {
      if (e.propertyName !== "transform") return;
      this.classList.remove("playing");
    }

    function hintsOn(e, index) {
      e.setAttribute("style", "transition-delay:" + index * 50 + "ms");
    }

    hints.forEach(hintsOn);

    keys.forEach(key => key.addEventListener("transitionend", removeTransition));

    window.addEventListener("keydown", playNote);
  }


}
</script>

<style src="./css/Piano.css" scoped/>
;
